/*
 * SimpleModal Image Gallery
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 *
 * Copyright (c) 2010 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: gallery.js 251 2010-07-21 05:39:45Z emartin24 $
 */

var imageGallery;

$(document).ready(function(){
	imageGallery = {
		active: false,
		/*
		 * Calls SimpleModal with appropriate options 
		 */
		init: function (jQueryImageSelecter) {
			imageGallery.images = $(jQueryImageSelecter);
			imageGallery.images.click(function () {
				imageGallery.current_idx = imageGallery.images.index(this);
				$(imageGallery.create()).modal({
					closeHTML: '',
					overlayId: 'gallery-overlay',
					containerId: 'gallery-container',
					containerCss: {left:0, width:'100%'},
					opacity: 80,
					position: ['20%', null],
					onOpen: imageGallery.open,
					onClose: imageGallery.close,
					overlayClose:true
				});

				return false;
			});
		},
		/*
		 * Creates the HTML for the viewer 
		 */
		create: function () {
			return $("<div id='gallery'> \
					<div id='gallery-image-container'> \
						<div id='gallery-controls'> \
							<div id='gallery-previous'> \
								<a href='#' id='gallery-previous-link'>&laquo; <u>P</u>rev</a> \
							</div> \
							<div id='gallery-next'> \
								<a href='#' id='gallery-next-link'><u>N</u>ext &raquo;</a> \
							</div> \
						</div> \
					</div> \
					<div id='gallery-meta-container'> \
						<div id='gallery-meta'> \
							<div id='gallery-info'><span id='gallery-title'></span><span id='gallery-pages'></span></div> \
							<div id='gallery-close'><a href='#' class='simplemodal-close'>X</a></div> \
						</div> \
					</div> \
				</div>");
		},
		/*
		 * SimpleModal callback to create the 
		 * viewer and open it with animations 
		 */
		open: function (d) {
			imageGallery.container = d.container[0];
			imageGallery.gallery = $('#gallery', imageGallery.container);
			imageGallery.image_container = $('#gallery-image-container', imageGallery.container);
			imageGallery.controls = $('#gallery-controls', imageGallery.container);
			imageGallery.next = $('#gallery-next-link', imageGallery.container);
			imageGallery.previous = $('#gallery-previous-link', imageGallery.container);
			imageGallery.meta_container = $('#gallery-meta-container', imageGallery.container);
			imageGallery.meta = $('#gallery-meta', imageGallery.container);
			imageGallery.title = $('#gallery-title', imageGallery.container);
			imageGallery.pages = $('#gallery-pages', imageGallery.container);

			d.overlay.slideDown(300, function () {
				d.container.show();
				imageGallery.display();
			});
		},
		/*
		 * SimpleModal callback to close the 
		 * viewer with animations
		 */
		close: function (d) {
			var self = this;
			imageGallery.meta.slideUp(function () {
				imageGallery.image_container.fadeOut('fast', function () {
					d.data.slideUp(500, function () {
						d.container.fadeOut(500, function () {
							d.overlay.slideUp(500, function () {
								self.close(); // or $.modal.close();	
							});
						});
					});
					imageGallery.unbind();
				});
			});
		},
		/*
		 * Display the previous/next image 
		 */
		browse: function (link) {
			imageGallery.current_idx = $(link).parent().is('#gallery-next') ? (imageGallery.current_idx + 1) : (imageGallery.current_idx - 1);
			imageGallery.display();
		},
		/* display the requested image and animate the height/width of the container */
		display: function () {
			imageGallery.controls.hide();
			imageGallery.meta.slideUp(300, function () {
				imageGallery.meta_container.hide();
				
				$('#gallery-image', imageGallery.container).remove();

				var img = new Image();
				img.onload = function () {
					imageGallery.load(img);
				};
				img.src = imageGallery.images.eq(imageGallery.current_idx).attr('href');

				if (imageGallery.current_idx !== 0) {
					// pre-load prev img
					var p = new Image();
					p.src = imageGallery.images.eq(imageGallery.current_idx - 1).attr('href');
				}
				if (imageGallery.current_idx !== (imageGallery.images.length - 1)) {
					// pre-load next img
					var n = new Image();
					n.src = imageGallery.images.eq(imageGallery.current_idx + 1).attr('href');
				}
			});
		},
		load: function (img) {
			var i = $(img);
			i.attr('id', 'gallery-image').hide().appendTo('body');
			var h = i.outerHeight(true),
				w = i.outerWidth(true);

			if (imageGallery.gallery.height() !== h || imageGallery.gallery.width() !== w) {
				imageGallery.gallery.animate(
					{height: h},
					300,
					function () {
						imageGallery.gallery.animate(
							{width: w},
							300,
							function () {
								imageGallery.show(i);
							}
						);
					}
				);
			}
			else {
				imageGallery.show(i);
			}
			
			imageGallery.gallery.show();
		},
		/* 
		 * Show the image and then the controls and meta 
		 */
		show: function (img) {
			img.show();
			imageGallery.image_container.prepend(img).fadeIn('slow', function () {
				imageGallery.showControls();
				imageGallery.showMeta();
			});
		},
		/*
		 * Show the image controls; previous and next 
		 */
		showControls: function () {
			imageGallery.next.hide().removeClass('disabled');
			imageGallery.previous.hide().removeClass('disabled');
			imageGallery.unbind();

			if (imageGallery.current_idx === 0) {
				imageGallery.previous.addClass('disabled');
			}
			if (imageGallery.current_idx === (imageGallery.images.length - 1)) {
				imageGallery.next.addClass('disabled');
			}
			imageGallery.controls.show();

			$('a', imageGallery.controls[0]).bind('click.gallery', function () {
				imageGallery.browse(this);
				return false;
			});
			$(document).bind('keydown.gallery', function (e) {
				if (!imageGallery.active) {
					if ((e.keyCode === 37 || e.keyCode === 80) && imageGallery.current_idx !== 0) {
						imageGallery.active = true;
						imageGallery.previous.trigger('click.gallery');
					}
					else if ((e.keyCode === 39 || e.keyCode === 78) && imageGallery.current_idx !== (imageGallery.images.length - 1)) {
						imageGallery.active = true;
						imageGallery.next.trigger('click.gallery');
					}
				}
			});
			$('div', imageGallery.controls[0]).hover(
				function () {
					var self = this,
						l = $(self).find('a:not(.disabled)');
					if (l.length > 0) {
						l.show();
					}
				},
				function () {
					$(this).find('a').hide();
				}
			);
		},
		/*
		 * Show the image meta; title, image x of x and the close X 
		 */
		showMeta: function () {
			var link = imageGallery.images.eq(imageGallery.current_idx).clone(),
				title = link.attr('title');

			imageGallery.title.html(link.attr('href', '#').html(title));
			imageGallery.pages.html('Image ' + (imageGallery.current_idx + 1) + ' of ' + imageGallery.images.length);
			imageGallery.meta_container.show()
			imageGallery.meta.slideDown(function () {
				imageGallery.active = false;
			});
		},
		/*
		 * Unbind gallery control events 
		 */
		unbind: function () {
			$('a', imageGallery.controls[0]).unbind('click.gallery');
			$(document).unbind('keydown.gallery');
			$('div', imageGallery.controls[0]).unbind('mouseenter mouseleave');
		}
	};
});